<template>
  <div class="i-box">
    <div class="i-name" :style="{color: color}">{{title}}</div>
    <div class="i-value" :class="{font_scale:scale}" :style="{color: color}">{{value}}</div>
  </div>
</template>

<script>
  export default {
    name: "DataItem",
    props: {
      title: {
        type: String,
        default: ""
      },
      value: {
        type: String,
        default: '0.0'
      },
      color: {
        type: String,
        default: '#000'
      },
      scale: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
      }
    },
    methods: {
      back() {

      }
    },
    components: {},
    created() {

    },
    computed: {}
  }
</script>

<style scoped>
  .i-box {
    text-align: left;
  }

  .i-name {
    margin-bottom: 1rem;
    font-size: 1.3rem;
  }

  .i-value {
    font-size: 2rem;
  }

  .font_scale {
    font-size: 4rem;
    font-weight: bold;
  }
</style>
